<template>
    <div>
        <div>
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="处理状态">
                    <el-select v-model="zhangt" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="投诉人">
                    <el-input
                            v-model="name"
                            placeholder="请输入"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findAll()">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--        屠苏列表-->
        <div>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="投诉类型"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.complaintsType.type }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="问题描述"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.problemDescription }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="处理状态"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.processingState }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="投诉人姓名"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.user.userName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="手机号码"
                        width="180">
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row.user.phone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="FindById(scope.row.complaintsId)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 访问人
                name:'',
                options: [{
                    value: 'null',
                    label: '全部'
                }, {
                    value: '待处理',
                    label: '待处理'
                }, {
                    value: '进行中',
                    label: '进行中'
                }, {
                    value: '已完成',
                    label: '已完成'
                }],
                zhangt: '',
                id:'',
                tableData:[],
                find:[]
            }
        },
        created() {
            //查询我的基本信息
            this.findAll();
        },
        methods: {
            findAll(){
                this.$axios
                    .get("systemuser/sTousu/findAll", {
                        params: {
                            //获取的周期
                            id: 1,
                            zhangt: this.zhangt,
                            name:this.name
                        },
                    })
                    .then((res) => {
                        this.tableData =  res.data;
                    });
            },

            FindById(id){
            //   直接调用$router.push 实现携带参数的跳转
                this.$router.push({
                    path: `/complaintFind/${id}`})

                }
        }
    }
</script>

<style scoped>

</style>
